<template>
	<view class="relative w-screen h-full">
		<view style="z-index:0;position:absolute;left:0;right:0;top:0;bottom:0;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent" />
		<view class="relative flex-col" :style="`height: calc(100% - ${navBarHeight || 0}px);`">
			<scroll-view scroll-y="true" class="h-full">
				<view class="flex justify-center">
					<image src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/activity.svg" style="height:180px;margin:22px auto 32px;"></image>
				</view>
				<view v-if="false" class="flex justify-around mt-20 mb-36 fs-12" style="color:#858585;">
					<view class="flex-col center">
						<image class="size-24 mb-4" src="@/static/svg/mine/menu-merchant-work.svg"></image>
						<view class="flex-col text-center">
							<text>策划人</text>
							<text>快速入口</text>
						</view>
					</view>
					<view class="flex-col center">
						<image class="size-24 mb-4" src="@/static/svg/mine/menu-merchant-work.svg"></image>
						<view class="flex-col text-center">
							<text>经纪人</text>
							<text>快速入口</text>
						</view>
					</view>
					<view class="flex-col center">
						<image class="size-24 mb-4" src="@/static/svg/mine/menu-merchant-work.svg"></image>
						<view class="flex-col text-center">
							<text>营销</text>
							<text>工具</text>
						</view>
					</view>
					<view class="flex-col center">
						<image class="size-24 mb-4" src="@/static/svg/mine/menu-merchant-work.svg"></image>
						<view class="flex-col text-center">
							<text>活动</text>
							<text>案例</text>
						</view>
					</view>
				</view>
				<view class="flex justify-center text-color-regular fs-20 font-semibold">
					<text>请选择活动类型</text>
				</view>
				<view class="flex center mt-4 color-secondary-info text-center fs-12 font-normal" @click="gotoCourse">
					<image class="size-12 mr-4" src="@/static/svg/publish/course.svg"></image>
					<text>活动教程</text>
				</view>
				<view class="flex center mt-5">
					<text class="text-black text-center fs-14 font-normal" v-if="activeData">你还能发布 <text style="color:#FF1F42;">{{activeData.activeCount}}</text> 个活动</text>
					<view class="ml-12 inline-flex center px-4 h-24 radius-4 bg-primary text-white fs-14 font-normal" @click="go2VIPPage"><text>我要加购</text><image class="w-6 h-9 ml-4" src="@/static/svg/publish/triangle-white.svg"></image></view>
				</view>
				<view v-if="userStore.isMerchant" class="relative flex item-center mt-0 mx-16 mb-12 px-20 radius-12 bg-white text-color-regular mt-16" style="height:57px;" @click="toCreateActivity(999)">
					<image class="size-32 mr-12" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/pintuan-pintuan.png"></image>
					<view class="flex flex-col">
						<text class="fs-14 font-semibold">拼团</text>
						<text class="mt-4 text-color-hint fs-12 font-normal">创建拼团</text>
					</view>
					<image class="w-6 h-9 absolute" style="right:20px;" src="@/static/svg/publish/triangle-gray.svg"></image>
				</view>
				<view class="relative flex item-center mt-0 mx-16 mb-12 px-20 radius-12 bg-white text-color-regular mt-16" style="height:57px;" @click="toCreateActivity(1)">
					<image class="size-32 mr-12" src="@/static/svg/publish/group-activity.svg"></image>
					<view class="flex flex-col">
						<text class="fs-14 font-semibold">普通活动</text>
						<text class="mt-4 text-color-hint fs-12 font-normal">创建普通活动</text>
					</view>
					<image class="w-6 h-9 absolute" style="right:20px;" src="@/static/svg/publish/triangle-gray.svg"></image>
				</view>
				<!-- <view class="relative flex item-center mt-0 mx-16 mb-12 px-20 radius-12 bg-white text-color-regular" style="height:57px;" @click="toCreateActivity(2)">
					<image class="size-32 mr-12" src="@/static/svg/publish/signup-activity.svg"></image>
					<view class="flex flex-col">
						<text class="fs-14 font-semibold">报名活动</text>
						<text class="mt-4 text-color-hint fs-12 font-normal">创建报名活动</text>
					</view>
					<image class="w-6 h-9 absolute" style="right:20px;" src="@/static/svg/publish/triangle-gray.svg"></image>
				</view> -->
				<!-- <view class="relative flex item-center mt-0 mx-16 mb-12 px-20 radius-12 bg-white text-color-regular" style="height:57px;" @click="toCreateActivity(3)">
					<image class="size-32 mr-12" src="@/static/svg/publish/external-activity.svg"></image>
					<view class="flex flex-col">
						<text class="fs-14 font-semibold">外部活动</text>
						<text class="mt-4 text-color-hint fs-12 font-normal">支持第三方活动跳转</text>
					</view>
					<image class="w-6 h-9 absolute" style="right:20px;" src="@/static/svg/publish/triangle-gray.svg"></image>
				</view> -->
				<view class="relative flex item-center mt-0 mb-12 mx-16 px-20 radius-12 bg-white text-color-regular" style="height:57px;" @click="toCopyActivity">
					<image class="size-32 mr-12" src="@/static/svg/publish/copy-activity.svg"></image>
					<view class="flex flex-col">
						<text class="fs-14 font-semibold">复制活动</text>
						<text class="mt-4 text-color-hint fs-12 font-normal">复制已有活动信息，快速发布</text>
					</view>
					<image class="w-6 h-9 absolute" style="right:20px;" src="@/static/svg/publish/triangle-gray.svg"></image>
				</view>
				<view class="relative flex justify-center item-center mt-0 mx-16 text-color-regular" @click="viewMyActivity" >
					<text class="fs-14 font-semibold text-color-hint">查看我的活动 ></text>
				</view>
				<view class="h-20"></view>
			</scroll-view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="relative flex-col">
				<view class="flex justify-end mb-12">
					<image class="size-32" src="@/static/svg/icon-close.svg" @click="closePopup"></image>
				</view>
				<view class="bg-white flex-col" style="border-radius:12px 12px 0 0;">
					<view class="mt-20 mb-16 leading-22 text-center text-color-regular fs-16 font-medium">火动次卡</view>
					<view class="px-16 pb-16 overflow-auto" :style="`max-height: calc(${94*3}px + ${8*2}px);`">
						<view v-for="(item,i) in cardList" :key="i" class="relative" :class="i!=cardList.length-1?'mb-8':''" style="height:94px;" @click="onClickCard(item)">
							<image v-if="selectedCardId===item.id" class="absolute w-full h-full" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-merchant-card-selected.png"></image>
							<image v-else class="absolute w-full h-full" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-merchant-card.png"></image>
							<view class="absolute" style="z-index:1;bottom:0;left:0;right:8px;height:68px;">
								<view class="pl-28 h-full flex item-center">
									<text class="font-normal mr-12" style="color:#9E6F31;font-size:28px;">{{item.cardName}}</text>
									<text class="font-bold" style="color:#9E6F31;font-size:28px;"><text class="fs-14">¥</text>{{item.cardCost}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="h-13 bg-default"></view>
					<view class="p-16">
						<view class="mb-16 text-color-regular fs-16 font-semibold leading-22">支付方式</view>
						<view class="flex justify-between item-center" @click="payType=1">
							<view class="inline-flex item-center">
								<image class="size-24 mr-8" src="@/static/svg/publish/icon-wechat.svg"></image>
								<text class="text-color-regular fs-14 font-normal">微信支付</text>
							</view>
							<image v-if="payType===1" class="size-16" src="@/static/svg/radio-checked.svg"></image>
							<image v-else class="size-16" src="@/static/svg/radio-default.svg"></image>
						</view>
						<view v-if="financialAccountType != 2" class="mt-12 flex justify-between item-center" @click="payType=2">
							<view class="inline-flex item-center">
								<image class="size-24 mr-8" src="@/static/svg/publish/icon-internetbank.svg"></image>
								<text class="text-color-regular fs-14 font-normal">网银对公打款</text>
							</view>
							<image v-if="payType===2" class="size-16" src="@/static/svg/radio-checked.svg"></image>
							<image v-else class="size-16" src="@/static/svg/radio-default.svg"></image>
						</view>
						<view v-if="payType===2">
							<view class="mt-4 leading-17 fs-12 font-normal">对公打款请复制下列地址，前往PC端登录商家后台进行操作。</view>
							<view class="mt-12 h-23 bg-default flex item-center px-8 text-color-hint fs-12 font-normal">{{bankPayUrl}}</view>
						</view>
					</view>
					<view v-if="payType===1" class="mx-12 mb-16 radius-8 bg-primary h-46 flex-col center text-white fs-16 font-normal leading-22" @click="toPay">
						<view class="text-center h-21"><text class="fs-14">¥</text><text class="fs-21 font-semibold">{{toPayAmt}}</text></view>
						<view class="text-center fs-12 h-15">立即支付</view>
					</view>
					<view v-else-if="payType===2" class="mx-12 mb-16 radius-8 bg-primary h-46 flex center text-white fs-16 font-normal leading-22" @click="doCopy(bankPayUrl)">复制链接</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup name="Publish">
	import { onShow } from '@dcloudio/uni-app'
	import { ref, computed, onMounted } from 'vue'
	import { getActiveLimitApi, getMerchantCardListApi, merchantCardCreateOrderApi, merchantCardPayApi } from '@/api/business.js'
	import { queryOrderPay } from '@/api/order.js'
	import { getBankPayUrlApi } from '@/api/common.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	
	const userStore = useUserStore()
	
	const navBar = ref(null)
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	
	const gotoCourse = () => {
		uni.navigateTo({
			url: '/pagesA/college/college'
		})
	}
	
	const go2VIPPage = ()=>{
		uni.navigateTo({
			url: '/pagesA/vip/vip'
		})
	}

	const popup = ref(null)
	const showPopup = () => {
		// 发布活动次数使用完后，需要先判断是否开通会员
		if (activeData.value.activeCount <= 0) {
			if (isNotOpenVip.value || !isVip.value) {
				// 进入开通会员页
				uni.navigateTo({
					url: '/pagesA/vip/vip'
				})
				return
			}
		}
		getMerchantCardList()
		popup.value && popup.value.open()
	}
	const closePopup = () => {
		popup.value && popup.value.close()
	}
	
	const selectedCardId = ref()
	const toPayAmt = ref(0)
	const cardList = ref([])
	const getMerchantCardList = () => {
		getMerchantCardListApi().then(res => {
			cardList.value = res.list// 按接口返回排序 .sort((a, b) => a.cardSort - b.cardSort)
			// 当次卡只有一个时，默认选中
			if (cardList.value.length === 1) {
				selectedCardId.value = cardList.value[0].id
			}
		})
	}
	
	const payType = ref(1) // 支付方式(1-微信，2-网银对公)
	const onClickCard = (item) => {
		selectedCardId.value = item.id
		if (payType.value === 1) {
			toPayAmt.value = item.cardCost
		} else if (payType.value === 2) {
			
		}
	}
	
	const toPay = () => {
		if (!selectedCardId.value) {
			uni.showToast({
				title: '请选择次卡类型',
				icon: 'none'
			})
			return
		}
		merchantCardCreateOrderApi({
			id: selectedCardId.value,
			payType: payType.value
		}).then(res => {
			payCallback(res)
			closePopup()
		})
	}
	
	const payCallback = async (orderNo) => {
		const res = await merchantCardPayApi({ orderNo })
		const orderInfo = JSON.parse(res.orderNo)
		uni.requestPayment({
			provider: 'wxpay',
			...orderInfo,
			success() {
				uni.showLoading()
				queryOrderPay({ orderNo }).then((res) => {
					console.log('查单结果', res)
				}).finally(() => {
					uni.hideLoading()
					uni.showToast({
						title: '购买成功',
						icon: 'none'
					})
					initData()
				})
			},
			fail(e) {
				if (e.errMsg === 'requestPayment:fail cancel') {
					// 取消支付
					queryOrderPay({ orderNo }).then((res) => {
						console.log('查单结果', res)
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: e.errMsg,
						duration: 2000
					})
				}
			}
		})
	}
	
	const doCopy = (text) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
	
	// 未开通会员
	const isNotOpenVip = computed(() => {
		return !(userStore.userInfo && userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.memberExpireTime) || false
	})
	// 是否未过期会员
	const isVip = computed(() => {
		return userStore.userInfo && userStore.userInfo.businessInfo && userStore.userInfo.businessInfo.memberExpireTime && (new Date(userStore.userInfo.businessInfo.memberExpireTime).getTime() > new Date().getTime()) || false
	})
	
	// 类型
	const financialAccountType = computed(() => {
		return userStore.userInfo.businessInfo.financialAccountType
	})
	
	/**
	 * 1:普通活动
	 * 2:报名活动
	 * 3:外部活动
	 * 999:拼团活动
	 */
	const toCreateActivity = (type) => {
		/**
		 * 1. 判断是否会员？
		 * 2. 次数是否用完？
		 */
		if (activeData.value.activeCount <= 0) {
			// 活动次数发布完后，直接跳转到vip页面
			go2VIPPage();
			// if (isNotOpenVip.value || !isVip.value) {
			// 	// 进入开通会员页
			// 	uni.navigateTo({
			// 		url: '/pagesA/vip/vip'
			// 	})
			// 	return
			// }
			// uni.showModal({
			// 	content: '您的发布次数已用完，请先购买',
			// 	showCancel: true,
			// 	confirmColor:'#00AEFF',
			// 	cancelColor:'#333333',
			// 	cancelText: '取消',
			// 	confirmText: '去购买',
			// 	success: (res) => {
			// 		if (res.confirm) {
			// 			showPopup()
			// 		}
			// 	}
			// })
			return
		}
		if(type===999){
			uni.navigateTo({
				url: `/pagesG/publish/create-group-buy-activity?type=${type}&from=publish`
			})
			return;
		}
		uni.navigateTo({
			url: `/pagesG/publish/create-activity?type=${type}&from=publish`
		})
	}
	
	const toCopyActivity = () => {
		// 发布活动次数使用完后，直接跳转到会员页面
		if(activeData.value.activeCount <= 0){
			return go2VIPPage();
		}
		uni.navigateTo({
			url: `/pagesG/publish/copy-activity`
		})
	}
	
	const viewMyActivity = ()=>{
		uni.navigateTo({
			url: `/pagesB/my-activity/my-activity?from=publish`
		})
	};

	// 获取网银支付地址
	const bankPayUrl = ref('')
	const getBankPayUrl = () => {
		getBankPayUrlApi().then(res => {
			bankPayUrl.value = res
		})
	}
	
	const activeData = ref()
	const initData = () => {
		getActiveCount()
		getBankPayUrl()
	}
	
	const getActiveCount = () => {
		getActiveLimitApi().then(res => {
			activeData.value = res
		})
	}
	
	onShow(() => {
		// 返回显示时，及时刷新可发布数
		getActiveCount()
	})
	
	onMounted(() => {
		initData()
		// 发布成功刷新剩余次数数据
		uni.$on('publishSuccess', initData)
	})
</script>
